<template>
  <div class="user-page">
    <!-- Header部分 -->
    <header class="user-header">
      <div class="header-content">
        <div class="avatar-container">
          <img :src="user.userImg || 'https://via.placeholder.com/80'" alt="用户头像" class="user-avatar">
        </div>
        <div class="user-info">
          <h3 class="username">{{user.userName}}</h3>
          <p class="user-id">ID: {{user.userId}}</p>
        </div>
        <div class="header-bg"></div>
      </div>
    </header>

    <!-- 其他部分 -->
    <div class="other-info">
      <div class="list-item" v-for="(item,index) in listItems" :key="item.title" @click="handleClick(index)">
        <div class="item-content">
          <div class="item-icon" :class="'icon-'+index">
            <i class="fa" :class="item.icon"></i>
          </div>
          <p class="item-title">{{ item.title }}</p>
        </div>
        <i class="fa fa-angle-right arrow-icon"></i>
      </div>
    </div>

    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue';
import Footer from '../components/Footer.vue';
import { useRouter } from 'vue-router';

const user = ref({});
const { proxy } = getCurrentInstance();
const listItems = ref([
  { title: '收货地址', icon: 'fa-map-marker' },
  { title: '个人信息', icon: 'fa-user' },
  { title: '我的钱包', icon: '💰' },
  { title: '饿了么会员卡', icon: 'fa-credit-card' },
  { title: '我的积分', icon: 'fa-star' },
  { title: '我的红包', icon: 'fa-envelope' },
  { title: '我的收藏', icon: 'fa-heart' },
  { title: '欢迎评分', icon: 'fa-thumbs-up' },
  { title: '我是商家', icon: 'fa-store' },
]);

onMounted(() => {
  user.value = proxy.$getSessionStorage('user') || {
    userImg: '',
    userId: '123456',
    userName: '用户名'
  };
});

const router = useRouter();

const handleClick = (index) => {
  const routes = [
    'userAddress',
    'updateUserInfo',
    'walletManagement',
    'vipUpgrade',
    'credit',
    'redPacket',
    'favorites',
    'rating',
    'businessManagement'
  ];
  if (routes[index]) {
    router.push({ path: routes[index] });
  }
};
</script>

<style scoped>
.user-page {
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 5vw; /* 为底部导航栏留出空间 */
}

/* Header部分样式 */
.user-header {
  background: linear-gradient(135deg, #0088ff, #00aaff);
  color: white;
  padding: 20px 15px 30px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}

.header-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translate(30%, -30%);
}

.avatar-container {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.user-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-info {
  margin-left: 15px;
}

.username {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.user-id {
  margin: 5px 0 0;
  font-size: 14px;
  opacity: 0.9;
}

/* 列表项样式 */
.other-info {
  margin: -20px 15px 20px;
  border-radius: 12px;
  overflow: hidden;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s;
}

.list-item:active {
  background-color: #f9f9f9;
}

.list-item:last-child {
  border-bottom: none;
}

.item-content {
  display: flex;
  align-items: center;
  flex: 1;
}

.item-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: white;
}

/* 为不同图标设置不同背景色 */
.icon-0 { background-color: #ff6b6b; }
.icon-1 { background-color: #48dbfb; }
.icon-2 { background-color: #d1b31d; }
.icon-3 { background-color: #feca57; }
.icon-4 { background-color: #5f27cd; }
.icon-5 { background-color: #ee5253; }
.icon-6 { background-color: #ff9ff3; }
.icon-7 { background-color: #0abde3; }
.icon-8 { background-color: #10ac84; }

.item-icon i {
  font-size: 16px;
}

.item-title {
  margin: 0;
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.arrow-icon {
  color: #ccc;
  font-size: 18px;
}

/* 底部菜单样式保持不变 */
.footer {
  width: 100%;
  height: 5vw;
  border-top: solid 1px #DDD;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
</style>